<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>不同年龄区间用户转化率实时折线图</title>
    <!-- 引入 echarts.js -->
<!-- 用本地数据好些   -->
    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 Dom -->
<div id="main" style="width: 100%;height:500px;margin: 20px auto;"></div>
<script>
    // 初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main'));
    // 定义年龄区间（与JSON数据对应）
    var ageGroups = ["0-18", "19-35", "36-50"];
    // 定义每个年龄组的线条颜色
    var lineColors = ['#1890ff', '#52c41a', '#faad14'];

    // 定义获取数据并渲染图表的函数
    function renderChart() {
        // 通过 AJAX 读取年龄转化率数据
        $.getJSON('../output/mengTime1.json', function (data) {
            // 提取x轴时间数据
            var xAxisData = data.map(item => item.xtime);

            // 处理每个年龄组的转化率数据
            var seriesData = ageGroups.map((group, index) => {
                // 为当前年龄组提取所有时间点的转化率
                var values = data.map(item => {
                    // 若当前时间点没有该年龄组数据，用0填充
                    var rate = item.yval[group] || "0.00%";
                    // 去除百分号并转换为数字
                    return parseFloat(rate);
                });
                return {
                    name: group,
                    type: 'line',
                    data: values,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    showSymbol: false,
                    itemStyle: {
                        normal: {
                            color: lineColors[index],
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 3,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,0,0,0.3)',
                            shadowOffsetY: 5
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: `${lineColors[index]}80`}, // 带透明度的颜色
                                {offset: 1, color: `${lineColors[index]}00`}
                            ])
                        }
                    }
                };
            });

            // 计算Y轴最大值（取所有数据的120%，确保显示完整）
            var allValues = [];
            seriesData.forEach(series => {
                allValues = allValues.concat(series.data);
            });
            var maxVal = Math.max(...allValues);
            var yAxisMax = Math.ceil(maxVal * 1.2) || 10; // 防止无数据时出错

            // 图表配置项
            var option = {
                backgroundColor: '#f5f7fa',
                title: {
                    text: '不同年龄区间用户浏览支付确认页面转化率',
                    left: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    textStyle: { color: '#333' },
                    formatter: function(params) {
                        let html = `<div style="font-weight:bold">${params[0].name}</div>`;
                        params.forEach(item => {
                            html += `<div>${item.seriesName}: ${item.value}%</div>`;
                        });
                        return html;
                    }
                },
                legend: {
                    data: ageGroups,
                    top: '5%',
                    right: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        rotate: 45,
                        interval: 'auto',
                        color: '#666'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '转化率(%)',
                    min: 0,
                    max: yAxisMax,
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        color: '#666',
                        formatter: '{value}%' // 显示百分号
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#eee']
                        }
                    }
                },
                series: seriesData
            };

            // 更新图表
            myChart.setOption(option);
        }).fail(function() {
            console.error('数据加载失败，请检查文件路径是否正确');
        });
    }

    // 初次渲染图表
    renderChart();

    // 窗口大小变化时自适应调整图表
    window.addEventListener('resize', function() {
        myChart.resize();
    });

    // 开启定时器，每隔15秒更新一次数据（符合15秒区间统计需求）
    setInterval(renderChart, 15000);
</script>
</body>
</html>